<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	ul
	{
		float:left;
		width:100%;
		padding:0;
		margin:0;
		list-style-type:none;
	}
	a
	{
		float:left;
		width:7em;
		text-decoration:none;
		color:white;
		background-color:purple;
		padding:0.2em 0.6em;
		border-right:1px solid white;
	}
	a:hover {background-color:#ff3300}
	li {display:inline}
	</style>
</head>
<body>
	<ul>
		<li><a href="#">Link one</a></li>
		<li><a href="#">Link two</a></li>
		<li><a href="#">Link three</a></li>
		<li><a href="#">Link four</a></li>
	</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>